<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>30页面布局.html</title>
	<style>
		.header{
			width: 100%;
			height: 100px;
			background-color: black;
		}
		.logo{
			width: 20%;
			height: 100%;
			background: red;
			float: left;
		}
		.nav{
			width: 80%;
			height: 100px;
			background: blue;
			float: right;
		}
		.section{
			width: 100%;
			height: 600px;
			background: pink;
		}
		.article{
			width: 60%;
			height: 100%;
			background: tomato;
			float: left;
		}
		.sider{
			width: 40%;
			height: 100%;
			background: green;
			float: right;
		}
		.footer{
			width: 100%;
			height: 200px;
			background: black;
		}
	</style>
</head>
<body>
	<div class="header">
		<h1 class="logo"></h1>
		<div class="nav"></div>
	</div>
	<div class="section">
		<div class="article"></div>
		<div class="aside"></div>
	</div>
	<div class="footer"></div>
	<header>
		<h1 class="logo"></h1>
		<nav></nav>
	</header>
	<section>
		<article></article>
		<aside></aside>
	</section>
	<footer></footer>
</body>
</html>